<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约中心</title>
    <link rel="stylesheet" href="../css/ReservationCenter.css">
    <link rel="stylesheet" href="../utils/iconfont.css">
    <link href="https://lib.baomitu.com/Swiper/8.4.4/swiper-bundle.css" rel="stylesheet">
    <script src="https://wowjs.uk/dist/wow.min.js"></script>
    <link rel="stylesheet" href="../css/animation.css">
</head>

<body>
    <div class="box">
        <nav>
            <div class="nav_center">
                <img src="../img/ReservationCenter/logonew.png" alt="">
                <ul>
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="./AboutUs.html">关于我们</a></li>
                    <li><a href="./ProductCenter.html">产品中心</a></li>
                    <li><a href="./ReservationCenter.html">预约设计</a></li>
                    <li><a href="./News.html">新闻资讯</a></li>
                    <li><a href="">服务平台</a></li>
                    <li><a href="./page/CallUs.html">联系我们</a></li>
                </ul>
            </div>

        </nav>
        <div class="banner">

            <div class="swiper" id="swiper2">
                <div class="swiper-wrapper">
                    <!-- 轮播图内容区域，动态渲染 -->
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <div class="designer">
            <div class="designer_title">
                <p>DESIGNER</p>
                <p>精牌设计师</p>
            </div>

            <div class="designer_main">
                <div><img src="../img/ReservationCenter/designer1bg.png" alt=""></div>
                <div><img src="../img/ReservationCenter/designer2bg.png" alt=""></div>
                <div><img src="../img/ReservationCenter/designer3bg.png" alt=""></div>
                <div>
                    <img class="wow animate__animated animate__backInUp" src="../img/ReservationCenter/designer1.png" alt="">
                    <p>何飞</p>
                    <p>擅长风格：简约、美式、北欧</p>
                </div>
                <div>
                    <img class="wow animate__animated animate__backInUp" src="../img/ReservationCenter/designer2.png" alt="">
                    <p>LUCK</p>
                    <p>擅长风格：北欧</p>
                </div>
                <div>
                    <img class="wow animate__animated animate__backInUp" src="../img/ReservationCenter/designer3.png" alt="">
                    <p>李云</p>
                    <p>擅长风格：美式、北欧</p>
                </div>


            </div>
            <div class="btn">查看更多</div>

        </div>

        <div class="designer2">
            <div class="lvjing">
                <div class="designer_information">
                    <img class="wow animate__animated animate__slideInLeft" src="../img/ReservationCenter/designer4.png" alt="">
                    <div class="wow animate__animated animate__slideInRight">
                        <p>设计大咖</p>
                        <p>朱超（设计总监）</p>
                        <p>个人成就</p>
                        <p>
                            2012年“世茂峰荟”作品在第二届国际环境艺术创新设计大赛中获三等奖.<br>
                            2015获得香港设计协会终身奖.
                        </p>
                        <p>设计理念</p>
                        <p>当下，消费者对于个性化的追求逐步高涨，“消费者不再喜欢千篇一律的设计，他们更喜欢有独特<br>
                            个性的设计。”我很愿意帮助他们完成个性家居的改造,设计风格注重中国传统文化，天人居和合一.
                        </p>
                    </div>

                </div>
            </div>

        </div>

        <div class="serivce">

            <div class="serivce_title">
                <p>serivce</p>
                <p>设计师免费服务</p>
            </div>

            <div class="serivce_main">
                <img src="../img/ReservationCenter/serviceImg.png" alt="">
                <div>
                    <p>一键预约设计师</p>
                    <input type="name" placeholder="您的真实姓名：">
                    <input type="phone" placeholder="您的联系手机：">
                    <textarea name="map" rows="5" cols="30" placeholder="请输入您的地址："></textarea>
                    <button class="wow animate__animated animate__pulse " data-wow-iteration="200">预约免费设计</button>
                </div>
                <div>
                    <p class="kehutitle">最新预约客户</p>
                    <div>
                        <p>
                            河南郑州市胡女士 <span>2018-03-12</span> 已申请上<br>
                            河南郑州市胡女士 <span>2018-03-12</span> 已申请上<br>
                            河南郑州市胡女士 <span>2018-03-12</span> 已申请上<br>
                            河南郑州市胡女士 <span>2018-03-12</span> 已申请上<br>
                            河南郑州市胡女士 <span>2018-03-12</span> 已申请上<br>
                            河南郑州市胡女士 <span>2018-03-12</span> 已申请上<br>
                            河南郑州市胡女士 <span>2018-03-12</span> 已申请上<br>
                            河南郑州市胡女士 <span>2018-03-12</span> 已申请上<br>
                            河南郑州市胡女士 <span>2018-03-12</span> 已申请上<br>
                        </p>
                    </div>

                </div>
            </div>
        </div>

        <div class="case">

            <div class="case_title">
                <p>case</p>
                <p>客户案例</p>
            </div>

            <div class="case_main">
                <div>
                    <img class="wow animate__animated animate__slideInLeft" src="../img/ReservationCenter/case1.png" alt="">
                    <p>床 + 床头柜一象牙白</p>
                    <p>20/24m2/混搭系/现代简约</p>
                </div>
                <div>
                    <img class="wow animate__animated animate__slideInDown" src="../img/ReservationCenter/case2.png" alt="">
                    <p>衣柜 + 白蜡木</p>
                    <p>20/24m2/深色系/现代简约</p>
                </div>
                <div>
                    <img class="wow animate__animated animate__slideInRight" src="../img/ReservationCenter/case3.png" alt="">
                    <p>衣柜 + 柚木</p>
                    <p>20/16m2/深色系/现代简约</p>
                </div>
            </div>
        </div>
        <footer>
            <div class="footer_center">
                <div class="footer_top">
                    <div class="footer_top_center">
                        <ul class="footer_top_center_ul">
                            <li>
                                <a href="">关于我们</a>
                                <ul>
                                    <li>公司简介</li>
                                    <li>文化产品</li>
                                    <li>发展历程</li>
                                </ul>
                            </li>
                            <li>
                                <a href="">产品中心</a>
                                <ul>
                                    <li>现代都市</li>
                                    <li>折叠城市</li>
                                    <li>清风物语</li>
                                    <li>落落星辰</li>
                                </ul>
                            </li>
                            <li>
                                <a href="">预约设计</a>
                                <ul>
                                    <li>精牌设计</li>
                                    <li>设计申请</li>
                                    <li>客户案例</li>
                                </ul>
                            </li>
                            <li>
                                <a href="">新闻资讯</a>
                                <ul>
                                    <li>品牌资讯</li>
                                    <li>热门观点</li>
                                    <li>家具动态</li>
                                    <li>精彩视频</li>
                                </ul>
                            </li>
                            <li>
                                <a href="">服务平台</a>
                                <ul>
                                    <li>理念服务</li>
                                    <li>服务支持</li>
                                    <li>服务承诺</li>
                                    <li>在线报修</li>
                                </ul>
                            </li>
                            <li>
                                <a href="">联系我们</a>
                                <ul>
                                    <li>
                                        <div>
                                            <i class="iconfont icon-dingwei"></i>
                                        </div>
                                        河南省-郑州高新区-万仙山-万仙洞
                                    </li>
                                    <li>
                                        <div>
                                            <i class="iconfont icon-31dianhua"></i>
                                        </div>
                                        110-123456789
                                    </li>
                                    <li>
                                        <div>
                                            <i class="iconfont icon-hulianwang"></i>
                                        </div>
                                        www.110.com
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>


                <div class="footer_bottom">
                    <div class="footer_bottom_left">
                        <p>&copy;2017姿在家家居用品股份有限公司版权所有
                            <span>法律声明及隐私权政策·知识产权</span>新ICP备&nbsp;05003017号新公网安备：65010402001003号
                        </p>
                    </div>

                    <div class="footer_bottom_right">
                        <p>友情链接:</p>
                        <i class="iconfont icon-xinlangweibo"></i><i class="iconfont icon-hulianwang"></i><i
                            class="iconfont icon-weixin"></i><i class="iconfont icon-QQ"></i>
                    </div>
                </div>
            </div>

        </footer>
        <div class="soild"></div>
    </div>

    <script type="module">
        import Swiper from "https://lib.baomitu.com/Swiper/8.4.4/swiper-bundle.esm.browser.min.js"

        let data = {
            "phone": "13286468316",
            "password": "20000212"
        }

        //发送请求获取轮播图资源
        // fetch("http://website.bluej.cn/api/carouselGroup/get?carouselGroupId=966")
        fetch("http://website.bluej.cn/api/admin/login", {
            method: "post",
            headers: {
                'Content-type': 'application/json'
            },//
            body: JSON.stringify(data)
        })

            .then(function (res) {
                return res.json()
            })
            .then(function (res) {
                localStorage.setItem('token', res['data']['token']);
                return res
            })
            .catch(err => console.log(err))
            .finally(function () {

            })
        let url;
        fetch("http://website.bluej.cn/api/carouselGroup/get?carouselGroupId=966", {
            method: 'GET',
            headers: {
                'Content-Type': 'x-www-form-urlencoded',
                'x-token': `${localStorage.getItem('token')}`
            }
        }).then(function (res) {
            return res.json();
        }).then(function (res) {
            localStorage.setItem('url', JSON.stringify(res['data']['Carousels']))
            return res;
        }).catch(function (err) {
            console.log(err);
        }).finally(function () {

        })
        url = JSON.parse(localStorage.getItem('url'))
        console.log(url);
        // url.forEach(function(item,intex){

        // })
        let tmpList = url.map(item => item.url)
        console.log(tmpList);



        let mainBox = document.querySelector("#swiper2>.swiper-wrapper")
        //遍历所有的数据
        url.forEach(function (item) {
            console.log(item.url);
            console.log(mainBox);
            mainBox.innerHTML += `
                <div class="swiper-slide">
                    <img data-src="${item.url}" class="swiper-lazy" alt="">
                    <div class="swiper-lazy-preloader"></div>
                </div>
                `;
        })

        var swiper2 = new Swiper('#swiper2', {
            //分页器
            pagination: {
                el: '.swiper-pagination',
                //开启小圆点切换功能
                clickable: true,
            },
            //自动播放
            autoplay: {
                //停留时间
                delay: 1000,
                //鼠标移入停止轮播，移出开始自动轮播
                pauseOnMouseEnter: true,
                //关闭静止自动播放
                disableOnInteraction: false,
            },
            //开启无缝轮播
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            //切换效果
            effect: 'fade',
            //开启懒加载
            lazy: true
        });

        // wow = new WOW({
        //         boxClass:'wow',
        //         animateClass:'animate',
        //         offset:-100,
        //         mobile:true,
        //         live:ture,
        //     })
        //     wow.init()

       new WOW().init()
    </script>


</body>

</html>